<template>
  <div class="tooltip">
    <el-tooltip effect="dark" placement="right">
      <div slot="content">
        {{ msg }}
      </div>
      <i class="el-icon-question" style="color:#409eff;margin-left:5px;font-size:15px;" />
    </el-tooltip>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {

  // eslint-disable-next-line vue/require-prop-types
  props: ['messages'],
  data() {
    return {
      msg: '-',
      bread: ''
    };
  },
  computed: {
    fil() {
      this.deal(this.messages);
      return this.msg;
    },
    ...mapState('diclist', ['dictMaps', 'breadTitle', 'dictFormula'])
  },
  watch: {
    dictFormula: {
      immediate: true,
      handler() {
        this.deal(this.messages);
      }
    },
    messages: {
      immediate: true,
      handler(val) {
        this.deal(val);
      }
    }
  },
  methods: {
    ...mapActions({ 'getFormulaList': 'diclist/getFormulaList' }),
    deal(val) {
      let lab = val.match(/.*(?=%|[\(|\（|].*[\)|\）])/g);
      lab = Array.isArray(lab) ? lab.shift() : val;
      const clone = this.breadTitle.slice() || [];
      clone.push(lab);
      clone.shift();
      const bread = clone.join('-');
      this.bread = bread;
      if (this.dictMaps.has(bread)) {
        this.msg = this.dictMaps.get(bread) || '-';
      }
    }
  }
};
</script>
<style lang='scss' scoped>
.tooltip{
  display: inline-block;
}
</style>
